CSS
/*This is a comment!*/

HTML
<!--This is a comment!-->

JavaScript
//This is a comment!
Computer -
Width: 1525px
Height: 765px
Phone -
Width: 1000px
Height: 1700px

Making code


HTML map creator

Embed in Google drive

Icon archive

Text comparison

Remove background

Lorum Ipsum

Video to Gif

Learning code


HTML dog

Simple HTML guide

W3Schools

Converting code


Pug to HTML

Clickable Image 1 Clickable Image 2 Clickable Image 3






HTML will show up here

Clip-Path

clip-path: inset(Apx Bpx Cpx Dpx);
A = top, B = right, C = bottom, D = left

clip-path: polygon(0% 0, 100% 0%, 100% 50%, 0 50%);
Top left, top right, bottom right, bottom left

Box-Shadow

box-shadow: Apx Bpx Cpx Dpx #color;
A = how off-center to the left the shadow is.
B = how off-center to the bottom the shadow is.
C = how thick/spread out the shadow is.
D = How big the shadow is.

Shapes

Square Circle Triangle
width:100px;
height:100px;		 width:100px;
height:100px;
border-radius:100%;		 border-left: 20px solid;
border-right: 20px solid transparent;
border-top: 20px solid;
border-bottom: 20px solid transparent;
position:absolute;

Root

:root {--main-bg-color: #f0f0f0;}
.item {background-color: var(--main-bg-color);}
HOME
All colors
Shades
Mixer
Converter
Gradient Maker
Monochromatic scheme
Analogous scheme

Pseudo-elements

A CSS pseudo-element is used to style specific parts of an element.
Code Result

p::first-line {color: blue;}

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text.</p>

You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text.

p::first-letter {color: blue;}

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!

p::selection {background: blue;}

<p>Highlight me with your mouse!</p>

Highlight me with your mouse!

Pseudo-classes

A pseudo-class is used to define a special state of an element.

Code Result

p:first-child {color: blue;}


<p>I love you.</p>
<p>I love you.</p>

I love you.

I love you.

p i:first-child {color: blue;}


<p>I <i>love</i> you. I <i>love</i> you.</p>

I love you.
I love you.

p:first-child i {color: blue;}


<p>I <i>love</i> you. I <i>love</i> you.</p>
<p>I <i>love</i> you. I <i>love</i> you.</p>

I love you. I love you.

I love you. I love you.

.special-stuff {color:blue;} p:not(.special-stuff) {color:black;}

<p class="special">I am special!</p> <p class="not-special">I am not special.</p>

I am special!

I am not special.
Key:

style

body

@property --gradient-angle {syntax: "<angle>";initial-value: 0turn;inherits: false;}
.border1 {width:100px;height:100px;animation: 2s gradient-angle infinite linear;border: 10px solid transparent;
background-image: linear-gradient(#FFF, #FFF),conic-gradient(from var(--gradient-angle),orange 0%,yellow 5%,transparent 6%,transparent 30%,orange 50%,yellow 55%,transparent 56%,transparent 80%,orange 100%);
background-clip: padding-box, border-box;background-origin: padding-box, border-box;}
@keyframes gradient-angle {to {--gradient-angle: 1turn;}}
@property --gradient-angle{syntax:"<angle>";initial-value:0turn;inherits:false}.border2{width:500px; height:500px; animation:2s gradient-angle infinite linear;border:10px solid transparent;background-image:linear-gradient(#fff,#fff),conic-gradient(from var(--gradient-angle),#ff69b4 0,orchid 5%,transparent 6%,transparent 80%,#ff69b4 100%);background-clip:padding-box,border-box;background-origin:padding-box,border-box}@keyframes gradient-angle{to{--gradient-angle:1turn}}
transform: none;
transform: rotate(10deg);
transform: skewX(10deg);
transform: skewY(-10deg);
transform: scale(0.8);
transform: scale(0.8, 1.2);
transform: translate(25px, 10px);
transform: scale(0.8) rotate(10deg) translate(25px, 10px);

Keyframes

.class {animation: move 3s infinite;}

@keyframes move {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}

Unless the animation is infinite, the item will always go back to whatever it looked like originally.
Name
Duration
Timing-function
Delay
Iteration-count
Fill-mode
Direction

Name

The animation-name property specifies a name for the @keyframes animation.

Examples

  • move
  • moveMe
  • literallyAnything
  • supercalifragilisticexpialidocious

    • Duration

    The animation-duration property defines how long an animation should take to complete one cycle.

    Examples

  • 1s
  • 5s
  • 22s

    • Timing

    The animation-timing-function specifies the speed curve of an animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to another.

    Types

  • linear - The animation has the same speed from start to end
  • ease - Default value. The animation has a slow start, then fast, before it ends slowly
  • ease-in - The animation has a slow start
  • ease-out- The animation has a slow end
  • ease-in-out - The animation has both a slow start and a slow end
  • cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1

    • Delay

    The animation-delay property specifies a delay for the start of an animation. Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds. Does not work with infinite (only the first animation, not between animations).

    Examples

  • 1s
  • 5s
  • -2s

    • Iteration

    The animation-iteration-count property specifies the number of times an animation should run. Default is 1.

    Examples

  • 1
  • 5
  • Infinite

    • Fill

    The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both). CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

    Types

  • forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
  • backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
  • both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

    • Direction

    The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

    Types

  • normal - The animation is played as normal (forwards)
  • reverse - The animation is played in reverse direction (backwards)
  • alternate - The animation is played forwards first, then backwards
  • alternate-reverse - The animation is played backwards first, then forwards

    • Hover

    item {transition: 0.3s;}

    item:hover {background-color: red;border:2px solid green;color:yellow;}

    item:hover .child {text-decoration: underline; transform: rotate(180deg);}

    item:hover .sibling {opacity: 0.5;transform: scale(1.2);}

    item:hover + .randomitem {display:block;}

    Timeout

    Actions before the wait
    setTimeout(function() {
    Actions after the wait
    }, 3000);

    Interval

    function yourFunction() {
    Function stuff here
    }
    setInterval(yourFunction, 1000);

    Timer

    - - - -
    var timerElement = document.getElementById('timer');
    var countdownInterval = setInterval(updateTimer, 1000);
    function updateTimer() {
    - - - -
    totalSeconds--; if (totalSeconds < 0) {
    clearInterval(countdownInterval);
    timerElement.innerHTML = 'Time is up!';
    }
    }

    Get Element -

    - - - -

    Get multiple elements -

    - - - -

    Change color/text/display* -

    - - - -

    Add class -

    - - - -

    *

    Font size .style.fontSize = "20px";
    Text/border color .style.color = "red";
    Inner text .textContent = "Hello world!";
    Background color .style.backgroundColor = "red";
    Hide element .style.display = "none";
    Make bold .style.fontWeight = "bold";
    Change font .style.fontFamily = "Arial";
    Center text .style.textAlign = "center";
    Set width .style.width = "100px";

    Randomly Generated Word

    const words = ["apple", "banana", "cherry", "date", "elderberry", "fig", "grape", "honeydew"];
    const randomIndex = Math.floor(Math.random() * words.length);

    Randomly Generated Number

    let x = 5; //Minimum
    let y = 10; //Maximum

    let randomInt = Math.floor(Math.random() * (y - x + 1)) + x;

    Console -

    console.log(variable + "regular text");

    console.error("Error");

    console.warn("Warning");

    console.log("%cStyled", "color: blue; font-size: 20px;");

    console.clear();

    Copy text -

    <body>
    <button onclick="abc()">ABC</button>
    <script>
    function abc() {
    const text = `
    TEXT TO COPY
    `;
    navigator.clipboard.writeText(text).then(() => {
    alert("Copied code");
    }).catch(error => {
    console.error('Failed to copy text: ', error);
    });
    }
    </script>
    </body>

    Inner text

    <div id="inner1">- - - -</div><i>Consistant text here if desired</i>
    <div id="inner2">- - - -</div><i>Consistant text here if desired</i>
    <br>
    <button onclick="showtextA()">Text A</button>
    <button onclick="showtextB()">Text B</button>
    <button onclick="showtextC()">Text C</button>
    <script>
    let inner1 = document.getElementById("inner1");
    let inner2 = document.getElementById("inner2");

    function showtextA() {
    inner1.innerHTML = `Text A1 here`;
    inner2.innerHTML = `Text A2 here`;
    }

    function showtextB() {
    inner1.innerHTML = `Text B1 here`;
    inner2.innerHTML = `Text B2 here`;
    }

    function showtextC() {
    inner1.innerHTML = `Text C1 here`;
    inner2.innerHTML = `Text C2 here`;
    }
    </script>
    CSS HTML Examples
    Italics font-style: italic; <i>ABC<i> ABC
    Bold font-weight: bold; <b>ABC<b> ABC
    Underline text-decoration: underline; <u>ABC<u> ABC
    Overline text-decoration: overline; ?

    ABC
    Strikethrough text-decoration: line-through; ?

    ABC

    <code> Makes the font look code-y. </code>
    1. No font family
    2. "Roboto", sans-serif
    3. "Brush Script MT", cursive
    4. "Times New Roman", Times, serif
    5. "Courier New", Courier, monospace
    6. Georgia, serif
    7. Verdana, sans-serif
    8. "Trebuchet MS", sans-serif
    9. "Comic Sans MS", cursive, sans-serif
    10. "Lucida Console", Monaco, monospace
    11. "Palatino Linotype", "Book Antiqua", Palatino, serif
    12. "Impact", Charcoal, sans-serif
    13. "Tahoma", Geneva, sans-serif
    14. "Arial Black", Gadget, sans-serif
    15. "Lucida Sans Unicode", "Lucida Grande", sans-serif
    16. "MS Serif", "New York", serif
    17. "Lucida Bright", serif
    18. "Garamond", serif
    19. "Copperplate", "Papyrus", fantasy
    20. "Brush Script MT", cursive
    21. "Lucida Handwriting", cursive
    <style>
    .abc p {text-indent: 10px;}
    </style>

    <div class="abc">
    <p> Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. </p> </div>

    Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque ex sapien vitae pellentesque sem.

    TEXT

    Shown text

    Hidden text

    TEXT

    display: inlineblock;


    background: linear-gradient(100deg,


    #afd7ff00 1%,#COLOR1 2.5%,#COLOR2 5.7%,#COLOR3 93%,#COLOR2 95%,#COLOR1 98%


    ),linear-gradient(182deg, #afd7ff00, #afd7ff4d 8%, #afd7ff00 15%);

    <style>p:first-letter{
    color:pink;
    font-size:60px;
    background:blue;}
    .abc{font-size:30px;}
    </style>
    <p class="abc">ABC</p>
    <style>
    .hidden {
    height: 40px;
    overflow: hidden;
    }
    .hidden:hover {height: 80px;}
    </style>
    <body>
    <div class="hidden">
    <p>Shown text</p>
    <p>Hidden text</p>
    </div>
    </body>
    <style>
    #spurt {
    font-size: 50px;
    margin: 0 auto;
    transition: .5s; }
    #spurt:hover {
    font-size: 100px; }
    </style>
    <body>
    <p id="spurt">TEXT</p>
    </body>
    <body>
    <div id="demo">This is a test.</div>
    <script>
    var i = 0;
    var txt = document.getElementById("demo").innerHTML;
    var speed = 50;
    document.getElementById("demo").innerHTML = '';
    function typeWriter() {
    if (i < txt.length) {
    document.getElementById("demo").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed); } }
    window.onload = function() {typeWriter();};
    </script>
    </body>
    Code Symbol
    &lt; <
    &gt; >
    &copy; ©
    &reg; ®
    &deg; °
    &frac14; ¼
    &iquest; ¿
    Code Symbol
    &times; ×
    &div; ÷
    &amp; &
    &ne; ≠
    &check; ✓
    &cross; ✗
    &sstarf; ⋆
    Code Symbol
    &sup2; ²
    &ntilde; ñ
    &Delta; Δ
    &horbar; ―
    &larr; ←
    &dollar; $
    <math>
    <mfrac>
    <mi>6</mi>
    <mi>7</mi>
    </mfrac>
    </math>    		 67
    Code Symbol
    &hearts; ♥
    &#9208; ⏸
    div{border-bottom: 2px solid black;}
    div:after{position:absolute; bottom:-6px; height:10px; width:10px; background:black; content:""; border-radius:5px; right:0;}
    &;
    &;
    &;
    Link!
    Images!

    Code

    <style>

    </style>
    
<ol>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <li>Fifth</li>
    </ol>

    Example

    1. First
    2. Second
    3. Third
    4. Fourth
    5. Fifth

    Options

















    <!DOCTYPE html>
    <html>
    <head>
    <style>
    * {margin: 0;padding: 0;}
    #dropdown_nav ul { list-style: none }
    #dropdown_nav li { position: relative; width: 100px; float: left }
    #dropdown_nav ul ul { left: 0; opacity: 0 }
    #dropdown_nav li:hover > ul {opacity: 1;}
    </style>
    </head>
    <body>
    <nav id="dropdown_nav">
    <ul>
    <li>Category A
    <ul>
    <li>Item A1</li>
    <li>Item A2</li>
    </ul>
    </li>
    <li>Category B
    <ul>
    <li>Item B1</li>
    <li>Item B2</li>
    </ul>
    </li>
    </ul>
    </nav>
    </body>
    </html>
    Click to view code!
    <style>
    .filterDiv {display: none;}
    </style>
    <body>
    <div id="myBtnContainer">
    <button class="btn active" onclick="filterSelection('all')"> Show all</button>
    <button class="btn" onclick="filterSelection('animals')"> Animals</button>
    <button class="btn" onclick="filterSelection('fruits')">Fruits</button>
    <button class="btn" onclick="filterSelection('colors')"> Colors</button>
    </div>
    <div class="filtercontainer">
    <div class="filterDiv colors fruits">Orange</div>
    <div class="filterDiv colors">Red</div>
    <div class="filterDiv animals">Dog</div>
    <div class="filterDiv fruits">Melon</div>
    <div class="filterDiv fruits animals">Kiwi</div>
    </div>
    <script>
    function filterSelection(c) { var elements = document.querySelectorAll('.filterDiv'); elements.forEach(function(element) { if (c === 'all' || element.classList.contains(c)) { element.style.display = 'block'; } else { element.style.display = 'none'; } }); document.querySelector('.btn.active').classList.remove('active'); event.currentTarget.classList.add('active'); }
    </script>
    </body>
    Click to view code!
    Orange
    Red
    Dog
    Melon
    Kiwi
    <style>
    ul { list-style: none; }
    #main_nav101 { position: relative; left: 500px; }
    #main_nav101 ul ul { display: none; position: absolute; }
    #main_nav101 li:hover > ul { display: block; }
    .itemA, .itemB { display: none; }
    </style>
    <nav id="main_nav101">
    <ul>
    <li>
    Main
    <ul>
    <li onclick="itemA()">A</li>
    <li onclick="itemB()">B</li>
    </ul>
    </li>
    </ul>
    </nav>
    <div class="itemA">AAAAAAAAAAAAAA</div>
    <div class="itemB">BBBBBBBBBBBBBB</div>
    <script>
    function itemA() { hidey(); document.querySelector('.itemA').style.display = 'block'; }
    function itemB() { hidey(); document.querySelector('.itemB').style.display = 'block'; }
    function hidey() { const elements = document.querySelectorAll('.itemA, .itemB'); elements.forEach(element =>
    { element.style.display = 'none'; }
    ); }
    </script>
    </body>
    AAAAAAAAAAAAAA
    BBBBBBBBBBBBBB
    Click to view code!
    EXAMPLE

    <body>
    <ul>
    <li onclick="optionSelected('A')">Option A</li>
    <li onclick="optionSelected('B')"> Option B</li>
    </ul>
    <script>
    function optionSelected(option) {
    if (option === 'A') {
    alert('Option A selected!');
    } else if (option === 'B') {
    alert('Option B selected!');
    } }
    </script>
    </body>

    COLOR

    body {background-color: COLOR;}

    IMAGE

    html { background: url(IMAGE URL) no-repeat center center fixed;background-size: cover;}

    VIDEO

    <style>
    body {overflow:hidden;}
    iframe {position: absolute;top: 50%;left: 50%;pointer-events:none;width: 100vw;height: 100vh;transform: translate(-50%, -50%);}
    </style>
    <div class="video-container">
    <iframe src="SRC?autoplay=1&mute=1&controls=0&rel=0&modestbranding=1&si=1TiOzZDO6SoGj2a6" allow="autoplay" allowfullscreen></iframe>
    </div>

    ENDLESS LOOP


    <style>
    body {overflow: hidden;}
    .image-container { position: relative; width: 200vw; height: 100vh; overflow: hidden; }
    .moving-image { position: absolute; top: 0; width: 100vw; height: 100%; }
    .moving-image img { width: 100%; height: auto; }
    @keyframes moveAnimation { 0% { transform: translateX(0); }
    100% { transform: translateX(-100vw); } }
    .moving-image:nth-child(1) { animation: moveAnimation 10s linear infinite; }
    .moving-image:nth-child(2) { position: absolute; top: 0; left: 100vw; animation: moveAnimation 10s linear infinite; }
    </style>
    <body>
    <div class="image-container">
    <div class="moving-image">
    <img src="URL" alt="Moving Image">
    </div>
    <div class="moving-image">
    <img src="URL" alt="Moving Image">
    </div>
    </div>
    </body>

    Transparent textures (textures)
    Unsplash (stock photos)
    Pexels (stock photos)
    Pixabay (stock photos)
    Freepik (assorted)
    Reshot (icons)
    Craiyon (AI)

    Click titles to open link

    Ocean

    Moving across the screen

    <style>
    .moving-image { position: absolute; top: 50%; left: -100px; animation: moveAnimation 5s linear infinite; }
    @keyframes moveAnimation {
    0% {
    left: -100px; }
    100% {
    left: calc(100% + 100px); } }
    </style>
    <body>
    <div class="image-container">
    <img src="https://via.placeholder.com/100" alt="Moving Image" class="moving-image">
    </div>
    </body>

    Moving from one point to another

    <style>
    .specific-image { position: absolute; left: 50px; top: 50px; width: 100px; }
    </style>
    <body>
    <img class="specific-image" src="IMAGE URL" alt="ALT">
    <button onclick="moveImage('.specific-image', 1122, 125)"> Move image</button>
    <script>
    function moveImage(selector, targetX, targetY, rotate) { const image = document.querySelector(selector); if (image) { const rect = image.getBoundingClientRect(); const currentX = rect.left; const currentY = rect.top; const deltaX = targetX - currentX; const deltaY = targetY - currentY; image.style.transition = "transform 1.5s"; image.style.transform = `translate(${deltaX}px, ${deltaY}px) ${rotate ? 'rotate(-5deg)' : ''}`; }}
    </script>
    </body>
    <style>
    .fading-image { position: absolute; left: 100px; top: 500px; width: 100px; height: auto; opacity: 0; transition: opacity 1s ease-in-out; }
    </style>
    <body>
    <img id="myImage" class="fading-image" src="IMAGEURL" alt="Specific Image">
    <script>
    var image = document.getElementById('myImage');
    function fadeIn() {image.style.opacity = '1'; }
    function fadeOut() {image.style.opacity = '0'; }
    function fadeInOut() { fadeIn();
    setTimeout(fadeOut, 3000);}
    setInterval(fadeInOut, 3000);
    </script>
    </body>
    1. Open video
    2. Share
    3. Embed
    4. src=URL
    5. copy URL and paste
    REGULAR

    <video src="VIDEO ADDRESS HERE" alt="Video"> </video>
    YOUTUBE

    <iframe src="https://www.youtube.com/embed/VIDEO ID HERE"></iframe>


    How to find video ID:
    1. Open the video you want to embed on youtube.
    2. Click "share" at the bottom.
    3. Click "embed".
    4. Copy the part after "https://www.youtube.com/embed/"
    5. Paste it into "VIDEO ID HERE".
    MODIFICATIONS

    autoplay = video plays as soon as it loads
    muted = video is automatically muted
    loop = video loops back to the beginning when it ends
    controls = play, pause, etc.
    poster="poster.jpg" = the image shown before the video is played/loaded

    <video src="VIDEO" alt="Video" MODIFICATIONS HERE ></video>

    REGULAR

    <a href="WEBSITE LINK" class="CLASS">LINK TITLE</a>

    LINK IN IMAGE

    <a href="WEBSITE" class="CLASS"> <img src="IMAGE"> </a>
    Add target="_blank" to open the link in a new tab!
    <a href="WEBSITE LINK" target="_blank" class="CLASS">LINK TITLE</a>

    STYLES

    a:visited - a link the user has visited
    a:active - a link the moment it is clicked
    Note: a:hover MUST come after a:link and a:visited in order to be effective.
    Note: a:active MUST come after a:hover in order to be effective.

    Basic table

    <table> 
        <tr> 
            <td>A</td> 
            <td>B</td> 
            <td>C</td> 
        </tr> 
        <tr> 
            <td>D</td> 
            <td>E</td> 
            <td>F</td> 
        </tr> 
        <tr> 
            <td>G</td> 
            <td>H</td> 
            <td>I</td> 
        </tr> 
    </table>
    A B C
    D E F
    G H I

    Colspan

    <table> 
        <tr> 
            <td colspan="2">A</td> 
            <td>B</td> 
         </tr> 
        <tr> 
            <td>D</td> 
            <td>E</td> 
            <td>F</td> 
        </tr> 
        <tr> 
            <td>G</td> 
            <td>H</td> 
            <td>I</td> 
        </tr> 
    </table>
    A B
    D E F
    G H I

    Rowspan

    <table> 
        <tr> 
            <td rowspan="2">A</td> 
            <td>B</td> 
            <td>C</td> 
        </tr> 
        <tr> 
            <td>D</td> 
            <td>E</td> 
            <td>F</td> 
        </tr> 
        <tr> 
            <td>G</td> 
            <td>H</td> 
            <td>I</td> 
        </tr> 
    </table>
    A B C
    D E
    F G H

    Column Groups

    <table> 
        <colgroup>
	<col>
	<col style="background:pink">
	<col>
	<col style="background:pink">
    </colgroup>
        <tr> 
            <td>A</td> 
            <td>B</td> 
            <td>C</td> 
        </tr> 
        <tr> 
            <td>D</td> 
            <td>E</td> 
            <td>F</td> 
        </tr> 
        <tr> 
            <td>G</td> 
            <td>H</td> 
            <td>I</td> 
        </tr> 
    </table>
    A B C D
    E F G H

    Table colors/style

    <table> 
        <tr style="background:silver"> 
            <td>A</td> 
            <td>B</td> 
            <td>C</td> 
        </tr> 
        <tr> 
            <td>D</td> 
            <td>E</td> 
            <td>F</td> 
        </tr> 
        <tr> 
            <td>G</td> 
            <td>H</td> 
            <td>I</td> 
        </tr> 
    </table>
    A B C
    D E F
    G H I

    Main template



    <!DOCTYPE html>
    <head>
    <style>

    STYLE GOES HERE

    </style>
    </head>
    <body>
    <div class="rain"></div>
    <script>

    JAVASCRIPT GOES HERE

    </script>
    </body>
    </html>

    CSS/Style



    body {height: 100vh;; overflow: hidden;}
    .rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;}

    .drop {
    position: absolute;
    bottom:100%;
    width: 2px;
    height: 50px;
    background: darkgray;
    animation: fall linear infinite; }

    @keyframes fall {
    to {transform: translateY(100vh);} }

    JavaScript



    document.addEventListener("DOMContentLoaded", function() {const rainContainer = document.querySelector('.rain');const numberOfDrops = 100;for (let i = 0; i < numberOfDrops; i++) {const drop = document.createElement('div');drop.className = 'drop';drop.style.left = `${Math.random() * 100}vw`;drop.style.animationDuration = `${0.5 + Math.random() * 0.5}s`;drop.style.animationDelay = `${Math.random() * 1.5}s`;rainContainer.appendChild(drop);}});
    ❅
    ❅
    ❆
    ❄
    ❅
    ❆
    ❄
    ❅
    ❆
    ❄

    CSS

    <style>
    .snowflake {
    color: white;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
    position: fixed;
    top: -10%;
    z-index: 9999;
    user-select: none;
    cursor: default;
    animation: snowflakes-fall 10s linear infinite, snowflakes-shake 3s ease-in-out infinite; }
    @keyframes snowflakes-fall { 0% { top: -10%; } 100% { top: 100%; } }
    @keyframes snowflakes-shake { 0% { transform: translateX(0); } 50% { transform: translateX(80px); } 100% { transform: translateX(0); } }
    .snowflake:nth-of-type(0) { left: 1%; animation-delay: 0s, 0s; }
    .snowflake:nth-of-type(1) { left: 10%; animation-delay: 1s, 1s; }
    .snowflake:nth-of-type(2) { left: 20%; animation-delay: 6s, 0.5s; }
    .snowflake:nth-of-type(3) { left: 30%; animation-delay: 4s, 2s; }
    .snowflake:nth-of-type(4) { left: 40%; animation-delay: 2s, 2s; }
    .snowflake:nth-of-type(5) { left: 50%; animation-delay: 8s, 3s; }
    .snowflake:nth-of-type(6) { left: 60%; animation-delay: 6s, 2s; }
    .snowflake:nth-of-type(7) { left: 70%; animation-delay: 2.5s, 1s; }
    .snowflake:nth-of-type(8) { left: 80%; animation-delay: 1s, 0s; }
    .snowflake:nth-of-type(9) { left: 90%; animation-delay: 3s, 1.5s; }
    </style>

    HTML

    <body>
    <div class="snowflakes">
    <div class="snowflake"> ❅ </div>
    <div class="snowflake"> ❅ </div>
    <div class="snowflake"> ❆ </div>
    <div class="snowflake"> ❄ </div>
    <div class="snowflake"> ❅ </div>
    <div class="snowflake"> ❆ </div>
    <div class="snowflake"> ❄ </div>
    <div class="snowflake"> ❅ </div>
    <div class="snowflake"> ❆ </div>
    <div class="snowflake"> ❄ </div>
    </div>
    </body>

    Main template

    <!DOCTYPE html>
    <head>
    <style>

    STYLE GOES HERE

    </style>
    </head>
    <body>
    <canvas></canvas>
    <script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"><script>

    JAVASCRIPT GOES HERE

    </script>
    </body>
    </html>

    CSS/Style

    * { margin: 0; padding: 0; }
    html, body { overflow: hidden; height: 100%; width: 100%; }

    JavaScript

    class SnowAnimation { constructor(canvasSelector) { this.canvas = document.querySelector(canvasSelector); if (!this.canvas) throw new Error("Canvas element not found"); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas, alpha: true }); this.renderer.setSize(window.innerWidth, window.innerHeight); this.camera.position.z = 5; window.addEventListener('resize', this.onWindowResize.bind(this)); this.createSnow(); this.animate(); } onWindowResize() { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); } createSnow() { const geometry = new THREE.BufferGeometry(); this.snowCount = 1000; this.positions = new Float32Array(this.snowCount * 3); this.velocities = new Float32Array(this.snowCount); for (let i = 0; i < this.snowCount; i++) { this.positions[i * 3] = (Math.random() - 0.5) * 10; this.positions[i * 3 + 1] = Math.random() * 10 - 5; this.positions[i * 3 + 2] = (Math.random() - 0.5) * 10; this.velocities[i] = Math.random() * 0.01 + 0.055; } geometry.setAttribute('position', new THREE.Float32BufferAttribute(this.positions, 3)); const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load('https://img.icons8.com/?size=100&id=37108&format=png&color=FFFFFF'); const material = new THREE.PointsMaterial({ map: texture, size: 0.1, transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, }); const shadowMaterial = new THREE.PointsMaterial({ map: texture, size: 0.2, transparent: true, opacity: 0.4, blending: THREE.AdditiveBlending, color: new THREE.Color(0x555555), }); this.snow = new THREE.Points(geometry, material); this.snowShadow = new THREE.Points(geometry, shadowMaterial); this.scene.add(this.snowShadow); this.scene.add(this.snow); } animate() { requestAnimationFrame(this.animate.bind(this)); const positions = this.snow.geometry.attributes.position.array; for (let i = 0; i < this.snowCount; i++) { positions[i * 3] += Math.sin((i + performance.now() * 0.001)) * 0.01; positions[i * 3 + 2] += Math.cos((i + performance.now() * 0.001)) * 0.01; positions[i * 3 + 1] -= this.velocities[i]; if (positions[i * 3 + 1] < -5) { positions[i * 3 + 1] = 5; positions[i * 3] = (Math.random() - 0.5) * 10; positions[i * 3 + 2] = (Math.random() - 0.5) * 10; } } this.snow.geometry.attributes.position.needsUpdate = true; this.snowShadow.geometry.attributes.position.needsUpdate = true; this.snow.rotation.y += 0.005; this.snowShadow.rotation.y += 0.006; this.renderer.render(this.scene, this.camera); } } new SnowAnimation('canvas');
    @property --gradient-angle {syntax: "";initial-value: 0turn;inherits: false;} .class {animation: 2s gradient-angle infinite linear;border: 10px solid transparent;background-image: linear-gradient(#FFF, #FFF), conic-gradient( from var(--gradient-angle), color1 0%, color2 37%, color3 30%, color2 33%, color1 40%, color1 50%, color2 77%, color3 80%, color2 83%, color1 90% ); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } @keyframes gradient-angle {to {--gradient-angle: 1turn;}}
    Awesome effects 1

    Awesome effects 2

    Image/video "fonts"

    Fancy text creator
    Hover over me to see the effects!
    <style>
    body {margin: 0;overflow: hidden;}
    .sparkle {position: absolute;border-radius: 50%;pointer-events: none;}
    </style>
    <body>
    <script>
    const sparkles = []; const numSparkles = 1; const sparkleSize = 3; // Adjust this value to change the size of the sparkles
    function randomColor() { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return `rgb(${r},${g},${b})`; }
    class Sparkle { constructor(x, y) { this.element = document.createElement('div'); this.element.className = 'sparkle'; document.body.appendChild(this.element); this.x = x; this.y = y; this.size = Math.random() * (sparkleSize / 2) + (sparkleSize / 2); this.color = randomColor(); this.life = Math.random() * 60 + 20; this.dx = (Math.random() - 0.5) * 2; this.dy = Math.random() * 1.5 + 0.5; this.updateStyle(); }
    updateStyle() { this.element.style.left = `${this.x}px`; this.element.style.top = `${this.y}px`; this.element.style.width = `${this.size}px`; this.element.style.height = `${this.size}px`; this.element.style.backgroundColor = this.color; } update() { this.x += this.dx; this.y += this.dy; this.life -= 1; if (this.life <= 0) this.size -= 0.1; if (this.size <= 0) { this.element.remove(); return false; } this.updateStyle(); return true; } }
    function animate() { for (let i = sparkles.length - 1; i >= 0; i--) { const sparkle = sparkles[i]; if (!sparkle.update()) { sparkles.splice(i, 1); } } requestAnimationFrame(animate); }
    function addSparkles(x, y) { for (let i = 0; i < numSparkles; i++) { sparkles.push(new Sparkle(x, y)); } }
    document.addEventListener('mousemove', (e) => { addSparkles(e.clientX, e.clientY); });
    animate();
    </script>
    </body>
    </html>
    <style>
    .smoke {position: absolute; color: rgba(234,234,234,0.033); font-size: 40px; z-index: 9999; pointer-events: none; visibility: hidden;}
    </style>
    <body>
    <script>
    const smokeyness = 100;const density = 40;const toke = [];const tokex = [];const tokedx = [];const tokey = [];const nicotine = [];let mousedown = false;let x = 400;let y = 300;let sleft = 0;let sdown = 0;function puff() {
    for (let i = 0; i < smokeyness; i++) { const smoke = document.createElement("div"); smoke.className = "smoke"; smoke.textContent = "●"; // Bullet character document.body.appendChild(smoke); toke[i] = smoke.style; tokex[i] = 0; tokey[i] = false; nicotine[i] = 0; } setInterval(drag, 50); }
    function drag() { if (mousedown) { for (let c = 0; c < smokeyness; c++) { if (tokey[c] === false) { toke[c].left = (tokex[c] = x - density / 2) + "px"; toke[c].top = (tokey[c] = y - density) + "px"; toke[c].visibility = "visible"; tokedx[c] = (c % 2 ? 1.5 : -1.5) * Math.random(); nicotine[c] = 80; break; } } } for (let c = 0; c < smokeyness; c++) { if (tokey[c] !== false) { smokeRising(c); } } }
    function smokeRising(i) { tokey[i] -= 4 + i % 3; tokex[i] += tokedx[i] - 0.5 + Math.random(); if (tokey[i] > sdown - density * 2 && tokex[i] > sleft && tokex[i] < sleft + window.innerWidth - density && (nicotine[i] += 2) < 256) { const color = `#${(nicotine[i] | (nicotine[i] << 8) | (nicotine[i] << 16)).toString(16)}`; toke[i].textShadow = `${color} 0px 0px ${Math.floor(nicotine[i] / 5)}px`; toke[i].top = tokey[i] + "px"; toke[i].left = tokex[i] + "px"; } else { toke[i].visibility = "hidden"; tokey[i] = false; } }
    document.addEventListener('mousedown', () => mousedown = true);
    document.addEventListener('mouseup', () => mousedown = false);
    document.addEventListener('mousemove', e => { x = e.pageX;
    y = e.pageY;
    });
    puff();
    </script>
    </body>
    </html>
    <style>
    :root {cursor: none;--cursorX: 50vw;--cursorY: 50vh;}
    :root:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: none;
    background: radial-gradient( circle 10vmax at var(--cursorX) var(--cursorY), rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.95) 100% );
    }
    </style>
    <body class="flashlight">
    <script>
    function update(e) {
    var x = e.clientX || e.touches[0].clientX;
    var y = e.clientY || e.touches[0].clientY;
    document.documentElement.style.setProperty('--cursorX', x + 'px');
    document.documentElement.style.setProperty('--cursorY', y + 'px'); }
    document.addEventListener('mousemove', update);
    document.addEventListener('touchmove', update);
    </script>
    </body>
    </html>
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    ●
    <style>
    .animatedbutton {display: inline-block;text-align: center;width: 200px;transition: all 0.5s;}
    .animatedbutton span {position: relative;transition: 0.5s;}
    .animatedbutton span:after {content: '\00bb';position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;}
    .animatedbutton:hover span {padding-right: 25px;}
    .animatedbutton:hover span:after {opacity: 1;right: 0;}
    </style>
    <body>
    <button class="animatedbutton"><span>ABC</span></button>
    </body>
    <style>.realishbutton {padding: 15px 25px;text-align: center;color: #fff;background-color: #04AA6D;border: none;border-radius: 15px;box-shadow: 0 9px #999;} .realishbutton:active {background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px);} </style> <body> <div class="realishbutton">ABC</div> </body>
    <style> .stretch-up:hover { animation: stretchUp 0.6s forwards; } @keyframes stretchUp { 70% { transform: translateY(-20px) scale(1, 1.6); } 73% { transform: translateY(-40px) scale(1, 1); } 76% { transform: translateY(-5px) scale(1, 1); } 85% { transform: translateY(-10px) scale(1, 1); } 90% { transform: translateY(0) scale(1, 1); } } </style> <body> <button class="stretch-up">Stretch up</button> </body>
    <style> .stretch-out:hover { animation: stretchOut 0.6s forwards; } @keyframes stretchOut { 45% { transform: scale(1.5, 0.7); border-radius: 15px; } 50% { transform: scale(0.5, 1.3); } 55% { transform: scale(1.3, 0.8); } 60% { transform: scale(1, 1.2); } 65% { transform: scale(1.1, 0.9); } 70% { transform: scale(1, 1); } 75% { transform: scale(1.1, 1); } 100% { transform: scale(1, 1); } } </style> <body> <button class="stretch-out">Stretch out</button> </body>
    <style> .squish-in:hover {animation: squish-in 0.5s forwards;}@keyframes squish-in { 60% { transform: scale(0.5, 1.6); border-radius: 45% 45% 45% 45% / 40% 40% 40% 40%; } 70% { transform: scale(1.5, 0.7); border-radius: 15px; } 80% { transform: scale(0.9, 1.3); border-radius: 25% 25% 25% 25% / 20% 20% 20% 20%; } 85% { transform: scale(1.2, 0.9); border-radius: 15px; } 90% { transform: scale(1, 1.1); border-radius: 15px; } } </style> <body> <button class="squish-in">Squish in</button> </body>
    <style> .squish-down:hover { animation: squish-down 0.5s forwards; } @keyframes squish-down { 70% { transform: scale(1, 0.3) translateY(70px); } 75% { transform: scale(1, 1.5) translateY(-15px); } 80%, 90% { transform: scale(1, 1.2) translateY(-10px); } 85% { transform: scale(1, 0.9) translateY(0); } } </style> <body> <button class="squish-down">Squish down</button> </body>
    Click on the button to copy its code!

    Event listeners

    <button id="myButton">Click me</button>
    <script>
    document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
    });
    </script>

    Within HTML

    <button onclick="alert('Button clicked!')">Click me</button>

    Onclick in JS

    <button id="myButton">Click me</button>
    <script>
    document.getElementById("myButton").onclick = function() {
    alert("Button clicked!");
    };
    </script>

    Multiple events

    <button id="myButton">Click me</button>
    <script>
    var button = document.getElementById("myButton");
    button.addEventListener("mouseover", function() {
    console.log("Mouse over button!");
    });
    button.addEventListener("click", function() {
    console.log("Button clicked!");
    });
    </script>

    Toggling

    const item = document.querySelector(".item");

    function toggle() {
    if (item.style.display === "none") {
    item.style.display = "block";
    } else {
    item.style.display = "none";
    }
    };
    Up arrow = 'ArrowUp'
    Down arrow = 'ArrowDown'
    Left arrow = 'ArrowLeft'
    Right arrow = 'ArrowRight'
    Space bar = ' '
    Letter (ie "n") = 'n'
    Mouse left-click = 'click'
    Mouse right-click = 'contextmenu'
    document.addEventListener('DOMContentLoaded', function() {
    const square = document.getElementById('square');
    let x = 0;
    let y = 0;
    function updatePosition() {
    square.style.transform = `translate(${x}px, ${y}px)`;
    }
    function moveSquare(event) {
    switch (event.key) {
    case 'ArrowDown':
    y += 10;
    break;
    case 'ArrowUp':
    y -= 10;
    break;
    case 'ArrowLeft':
    x -= 10;
    break;
    case 'ArrowRight':
    x += 10;
    break;
    case ' ':
    square.style.backgroundColor = 'blue';
    break;
    }
    updatePosition();
    }
    function changeColorToGreen() {
    square.style.backgroundColor = 'green';
    }
    document.addEventListener('keydown', moveSquare);
    document.addEventListener('click', changeColorToGreen);

    Basic scrollbar

    <style>
    .scroll {border:2px solid;}
    .scroll::-webkit-scrollbar {width: 10px;}
    .scroll::-webkit-scrollbar-track {background: lavender; border-radius: 10px;}
    .scroll::-webkit-scrollbar-thumb {background: purple;border-radius: 10px;}
    .demo > * {height: 280px;overflow-x: hidden;width: 100px;}
    </style>
    <div class="demo">
    <div class="scroll">
    TEXT HERE!
    </div>
    </div>

    Cool Design 1

    .scroll::-webkit-scrollbar-track {
    background-color: black;
    }

    .scroll::-webkit-scrollbar-thumb {
    background-color: #f97316;
    background-image: linear-gradient(
    45deg,
    #000 20%,
    transparent 20%,
    transparent 40%,
    #000 40%,
    #000 60%,
    transparent 60%,
    transparent 80%,
    #000 80%
    );
    }

    Tape Measure

    <style>
    :root {--abc: 300px;}
    #tapeMeasureScroll::-webkit-scrollbar {opacity:0;}
    #tapeMeasureScroll {width: var(--abc);height: 280px; position:relative; overflow-x: hidden;font-size:30px;}
    #progress {position: fixed;top: 0;left: var(--abc);width: 50px;height: 280px;}
    #tape-body {position: absolute;width: 50px;height: 76px;background-size: cover;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/tape2.png");}
    #tape-measure {height:0px;position: absolute;right: 12px;width: 24px;background-size: 100% auto;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/tape2.jpg");}
    </style>

    <div class="scroll-demo">
    <div id="tapeMeasureScroll">Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere.
    <div id="progress">
    <div id="tape-body"></div>
    <div id="tape-measure"></div>
    </div>
    </div>
    </div>

    <script>
    const touch = "ontouchstart" in window || (window.DocumentTouch && document instanceof DocumentTouch); const cache = { viewport: {}, rects: [], node: {} }; let tapeBody, tapeMeasure, tapeMeasureScroll; window.addEventListener("load", init); function init() { tapeBody = document.getElementById("tape-body"); tapeMeasure = document.getElementById("tape-measure"); tapeMeasureScroll = document.getElementById("tapeMeasureScroll"); if (!tapeBody || !tapeMeasure || !tapeMeasureScroll) {return;} recache(); const barWidth = getScrollBarWidth(); tapeMeasureScroll.style.paddingRight = `${barWidth}px`; tapeMeasureScroll.addEventListener("scroll", touch ? scrollCheck : throttle(scrollCheck, 10)); window.addEventListener("resize", debounce(recache, 50)); } function recache() { cache.viewport = { width: tapeMeasureScroll.clientWidth, height: tapeMeasureScroll.clientHeight }; cache.document = { height: tapeMeasureScroll.scrollHeight, width: tapeMeasureScroll.scrollWidth }; cache.node = tapeBody.getBoundingClientRect(); scrollCheck(); } function scrollCheck() { const offset = getScrollOffset(); const height = cache.document.height - cache.viewport.height || 1; const width = cache.viewport.height - cache.node.height; const progress = offset.y / height * width; tapeBody.style.transform = `translate3d(0, ${progress}px, 0)`; tapeMeasure.style.height = `${progress}px`; } function getScrollOffset() { const offset = { x: tapeMeasureScroll.scrollLeft, y: tapeMeasureScroll.scrollTop }; return offset; } function throttle(fn, limit, context) { let wait; return function () { context = context || this; if (!wait) { fn.apply(context, arguments); wait = true; return setTimeout(() => wait = false, limit); } }; } function debounce(fn, limit, u) { let e; return function () { const i = this; const o = arguments; const a = u && !e; clearTimeout(e); e = setTimeout(function () { e = null; if (!u) fn.apply(i, o); }, limit); if (a) fn.apply(i, o); }; } function getScrollBarWidth() { const div = document.createElement("div"); div.style.cssText = "width: 100px; height: 100px; overflow: scroll; position: absolute; top: -9999px;"; document.body.appendChild(div); const scrollBarWidth = div.offsetWidth - div.clientWidth; document.body.removeChild(div); return scrollBarWidth; }
    </script>

    Portrait vs Landscape

    <style>
      #element1, #element2 {display: none;}
    </style>

    <div id="element1">Portrait Mode</div>
    <div id="element2">Landscape Mode</div>

    <script>
    function checkOrientation() {
      const portrait = window.matchMedia("(orientation: portrait)").matches;

      document.getElementById("element1").style.display = portrait ? "block" : "none";
      document.getElementById("element2").style.display = portrait ? "none" : "block";
    }

    checkOrientation();

    window.addEventListener("resize", checkOrientation);
    window.addEventListener("orientationchange", checkOrientation);
    </script>

    Computer

    @media screen and (min-width: 768px) {

    Phone

    @media screen and (max-width: 767px) {

    Page 1

    <body>
    <button id="triggerButton">Click Me</button>
    <script>
    document.getElementById("triggerButton").addEventListener("click", function() {
    localStorage.setItem("buttonClicked", "true");
    });
    </script>
    </body>

    Page 2

    <script>
    if (localStorage.getItem("buttonClicked") === "true") {
    EVENT TRIGGERED
    }
    </script>

    Suggestions

    Navigate to Page 2
    window.location.href = "Page2.html";

    Remove flag from storage
    localStorage.removeItem("buttonClicked"); 





    <form id="ItemForm">
    <label><input type="checkbox" name="Item 1" value="Item 1"> Item 1 </label>
    <label><input type="checkbox" name="Item 2" value="Item 2"> Item 2 </label>
    <label><input type="checkbox" name="Item 3" value="Item 3"> Item 3 </label>
    <label><input type="checkbox" name="Item 4" value="Item 4"> Item 4 </label>
    <label><input type="checkbox" name="Item 5" value="Item 5"> Item 5 </label>
    <button type="submit">Submit</button>
</form>

    - - - -
    <script>
  document.getElementById('ItemForm').addEventListener('submit', function(e) {
      e.preventDefault();
      const selectedGenres = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')) .map(checkbox => checkbox.name);

    - - - -
    </script>
    <body>
    <input id="noteInput" type="text" placeholder="Enter your note">
    <button id="saveBtn">Save Note</button>
    <div id="result"></div>
    <script>
    const noteInput = document.getElementById('noteInput');
    const resultDiv = document.getElementById('result');
    let editIndex = -1;
    //Keep track of the index being edited
    function loadNotes() {
    //Load saved notes from localStorage
    const notes = JSON.parse(localStorage.getItem('savedNotes')) || [];
    resultDiv.innerHTML = '';
    notes.forEach((note, index) => {
    const noteDiv = document.createElement('div');
    noteDiv.textContent = note;
    const editBtn = document.createElement('button');
    editBtn.textContent = 'Edit';
    editBtn.onclick = () =>
    editNote(index);
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.onclick = () =>
    deleteNote(index);
    noteDiv.appendChild(editBtn);
    noteDiv.appendChild(deleteBtn);
    resultDiv.appendChild(noteDiv);});}
    document.getElementById('saveBtn').addEventListener('click', () => {
    //Save or edit a note
    const note = noteInput.value;
    if (!note) return;
    const notes = JSON.parse(localStorage.getItem('savedNotes')) || [];
    if (editIndex >= 0) {
    notes[editIndex] = note;
    //Edit the note
    editIndex = -1;
    //Reset edit index
    } else {
    notes.push(note);}
    // Add a new note
    localStorage.setItem('savedNotes', JSON.stringify(notes));
    noteInput.value = '';
    //Clear the input box
    loadNotes();});
    //Reload the notes
    function editNote(index) {
    //Edit a note
    const notes = JSON.parse(localStorage.getItem('savedNotes')) || [];
    noteInput.value = notes[index];
    //Load the note into the input box
    editIndex = index; }
    //Set the index of the note being edited
    function deleteNote(index) {
    //Delete a note
    const notes = JSON.parse(localStorage.getItem('savedNotes')) || [];
    notes.splice(index, 1);
    //Remove the note from the array
    localStorage.setItem('savedNotes', JSON.stringify(notes));
    loadNotes(); }
    //Reload the notes
    window.addEventListener('load', loadNotes);
    //Load notes when the page loads
    </script>
    </body>
    <body>
    <form id="itemForm">
    <label><input type="radio" name="item" value="Item 1"> Item 1</label><br>
    <label><input type="radio" name="item" value="Item 2"> Item 2</label><br>
    <label><input type="radio" name="item" value="Item 3"> Item 3</label><br>
    <label><input type="radio" name="item" value="Item 4"> Item 4</label><br><br>
    <button type="submit">Submit</button>
    </form>
    <script>
    document.getElementById('itemForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const selecteditem = document.querySelector('input[name="item"]:checked')?.value || 'None selected';
    console.log(selecteditem);
    });
    </script>
    </body>

    Flip Book

    How to code this book!
    i



    By Katie
    2024

    ii

    Contents

    CSS
    1
    HTML
    2
    JavaScript
    3
    1

    CSS

    2

    HTML

    3

    JavaScript

    4

    <style>
    CSS GOES HERE
    </style>
    <body>
    HTML GOES HERE
    <script>
    JAVASCRIPT GOES HERE
    </script>
    </body>

    The end!
    <style> .card-carousel { display: flex; align-items: center; justify-content: center; position: relative; } .card-carousel .my-card { height: 15rem; width: 5rem; position: relative; z-index: 1; -webkit-transform: scale(0.6) translateY(-2rem); transform: scale(0.6) translateY(-2rem); opacity: 0; cursor: pointer; pointer-events: none; background: white; border:2px solid; transition: 1s; } .card-carousel .my-card.active2 { z-index: 3; -webkit-transform: scale(1) translateY(0) translateX(0); transform: scale(1) translateY(0) translateX(0); opacity: 1; pointer-events: auto; transition: 1s; } .card-carousel .my-card.prev, .card-carousel .my-card.next { z-index: 2; -webkit-transform: scale(0.8) translateY(-1rem) translateX(0); transform: scale(0.8) translateY(-1rem) translateX(0); opacity: 0.6; pointer-events: auto; transition: 1s; } </style> <body> <div class="card-carousel"> <div class="my-card"></div> <div class="my-card"></div> <div class="my-card"></div> <div class="my-card"></div> <div class="my-card"></div> <div class="my-card"></div> <div class="my-card"></div> <div class="my-card"></div> <div class="my-card"></div> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script> $num = $('.my-card').length; $even = $num / 2; $odd = ($num + 1) / 2; if ($num % 2 == 0) { $('.my-card:nth-child(' + $even + ')').addClass('active2'); $('.my-card:nth-child(' + $even + ')').prev().addClass('prev'); $('.my-card:nth-child(' + $even + ')').next().addClass('next'); } else { $('.my-card:nth-child(' + $odd + ')').addClass('active2'); $('.my-card:nth-child(' + $odd + ')').prev().addClass('prev'); $('.my-card:nth-child(' + $odd + ')').next().addClass('next'); } $('.my-card').click(function() { $slide = $('.active2').width(); if ($(this).hasClass('next')) { $('.card-carousel').stop(false, true).animate({left: '-=' + $slide} ); } else if ($(this).hasClass('prev')) { $('.card-carousel').stop(false, true).animate({left: '+=' + $slide} ); } $(this).removeClass('prev next'); $(this).siblings().removeClass('prev active2 next'); $(this).addClass('active2'); $(this).prev().addClass('prev'); $(this).next().addClass('next'); } ); </script> </body>

    A

    B

    C

    D

    E

    F

    G

    H

    I

    ←
    →
    <style> .carousel { position: absolute; display: flex; width: 700px; height: 130px; left: 150; top: 150px } .arrows { display: flex; position: absolute; top: 30px } .arrow { cursor: pointer; background-color: gold; padding: 10px; border: 2px solid #ff0; margin: 10px; position: absolute } .na1, .na2, .na3, .na4 { position: absolute; left: -1000px; display: none; opacity: 0; Z-index: -100 } .na4 { display: none; } .card { height: 15vh; width: 5vw; background-color: white; top: 0; position: absolute; display: inline-block; margin: 0 10px; box-shadow: rgba(0, 0, 0, .7) 0 2px 6px -2px; border-radius: 1vw; position: absolute; transition: all .3s ease-in-out } .left { left: -3vw } .right { left: 28vw } .leftside { opacity: .5; left: 1vw; z-index: -1 } .move_one { left: 5vw; z-index: 1; opacity: 1 } .move_two { left: 11vw; z-index: 1; opacity: 1 } .move_three { left: 17vw; z-index: 1; opacity: 1 } .rightside { left: 21vw; opacity: .5; z-index: -1 } </style> <body> <div class="carousel"> <div id="item_a" class="card leftside"> <h3>A</h3> </div> <div id="item_b" class="card move_one"> <h3>B</h3> </div> <div id="item_c" class="card move_two"> <h3>C</h3> </div> <div id="item_d" class="card move_three"> <h3>D</h3> </div> <div id="item_e" class="card rightside"> <h3>E</h3> </div> <div id="item_f" class="card na1"> <h3>F</h3> </div> <div id="item_g" class="card na2"> <h3>G</h3> </div> <div id="item_h" class="card na3"> <h3>H</h3> </div> <div id="item_i" class="card na4"> <h3>I</h3> </div> <div class="arrows"> <div onclick="left()" class="left arrow">←</div> <div onclick="right()" class="right arrow">→</div> </div> </div> <script> const items = Array.from({ length: 9 }, (_, i) => document.getElementById(`item_${String.fromCharCode(97 + i)}`) ); const classes = [ "leftside", "move_one", "move_two", "move_three", "rightside", "na1", "na2", "na3", "na4", ]; function remove() { items.forEach(item => item && classes.forEach(cls => item.classList.remove(cls))); } function updateClasses(direction) { const currentIndex = classes.findIndex(cls => items[0].classList.contains(cls)); const offset = direction === "right" ? 1 : -1; const newIndex = (currentIndex + offset + classes.length) % classes.length; remove(); for (let i = 0; i < items.length; i++) { items[i].classList.add(classes[(newIndex + i) % classes.length]); } } function right() { updateClasses("right"); } function left() { updateClasses("left"); } </script> </body>

    Hover over me to flip!

    Hey there!

    Click on me to flip!
    Hey there!
    <style>
    .flip-card-container {perspective: 1000px;}
    .flip-card { width: 300px; height: 200px; position: relative; transform-style: preserve-3d; transition: transform 0.6s; }
    .flip-card-container:hover .flip-card { transform: rotateY(180deg); }
    .card-front, .card-back { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; }
    .card-front { background: #4CAF50; }
    .card-back { background: #FF5722; transform: rotateY(180deg); }
    </style>
    <body>
    <div class="flip-card-container">
    <div class="flip-card">
    <div class="card-front">
    <p>Front Content</p>
    </div>
    <div class="card-back">
    <p>Back Content</p>
    </div>
    </div>
    </div>
    </body>
    <style>
    .back, .front {
    box-shadow: rgba(0, 0, 0, .7) 0 2px 6px -2px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 1vw;
    backface-visibility: hidden;
    position: absolute;
    border: 2px solid;
    transition: all .3s ease-in-out
    }
    .card2.flipped .front { transform: rotateY(180deg) }
    .card2.flipped .back { transform: rotateY(0) }
    .card2 { position: absolute; height: 37vh; width: 15vw; display: inline-block; margin: 0 10px }
    .front { background-size: cover; background-repeat: no-repeat; background-position: center center; transform: rotateY(0); z-index: 2 }
    .back { transform: rotateY(-180deg) }
    </style>
    </head>
    <body>
    <div class="card2">
    <div class="front">Front!</div>
    <div class="back">Back!</div>
    </div>
    <script>
    document.querySelectorAll('.card2').forEach(card =>
    { card.addEventListener('click', () =>
    { card.classList.toggle('flipped'); }); }); </script>
    </body>

    Speech bubble

    Thought bubble

    Content by day

    console.log("1");
    console.log("2");
    } }
    displayContent();